<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../util/jquery-3.4.0.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/logistics.css">

</head>
<body>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >Modal title</h4>
            </div>
            <div class="modal-body">
                <div>
                    <input type="text" class="form-control seekTime" placeholder="请搜索时间">
                    <button type="button" class="btn btn-default">搜索</button>
                </div>
                <table class="table">
                   <tr>
                        <th>时间</th>
                        <th>姓名</th>
                        <th>请假时长</th>
                        <th>替班人员</th>
                        <th>请假事由</th>
                   </tr>
                   <tbody id="tbody3">

                   </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade logistics-div" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabe">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">请假条</h4>
            </div>
            <div class="modal-body" id="ttbody">
                <table class="table">
                    <tr>
                        <th>请假时间</th>
                        <td><input type="text" id="leave-time" placeholder="格式如2019-05-08"><span id="span1">×</span><span id="span2">√</span>
                        </td>
                    </tr>
                    <tr>
                        <th>请假人</th>
                        <td><input type="text" id="leave-id" ><span id="span3">×</span><span id="span4">√</span></td>
                    </tr>
                    <tr>
                        <th>请假时长</th>
                        <td><input type="text"  id="leave-hour" placeholder="格式如xx小时"><span id="span5">×</span><span id="span6">√</span></td>
                    </tr>
                    <tr>
                        <th>替班人员</th>
                        <td><input type="text" id="leave-id2"  placeholder=""><span id="span7">×</span><span id="span8">√</span></td>
                    </tr>
                    <tr>
                        <th>请假事由</th>
                        <td><textarea rows="5"  id="leave-reason" placeholder="最少两个字" style="width: 400px;"></textarea><span id="span9">×</span><span id="span10">√</span></td>
                    </tr>
                </table>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary logistics-btn3">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >Modal title</h4>
            </div>
            <div class="modal-body">
                <div>
                    <input type="text" class="form-control seekTime" placeholder="请搜索时间">
                    <button type="button" class="btn btn-default">搜索</button>
                </div>
                <table class="table">
                    <tr>
                        <th>时间</th>
                        <th>请假时长</th>
                        <th>替班人员</th>
                        <th>请假事由</th>
                    </tr>
                    <tbody id="tbody4">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">考勤统计</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">个人考勤</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="container-fluid">
                            <div class="row head">
                                <div class="col-lg-2 col-lg-offset-1 col-md-2 col-md-offset-1">
                                    <span><b>首页</b></span>/<span>考勤系统</span>
                                </div>
                            </div>
                            <div class="row seek">
                                <div class="col-lg-4 col-lg-offset-7 col-md-4 col-md-offset-7">
                                    <div class="container-fluid">
                                        <div class="col-lg-8 col-md-8">
                                            <input type="text" class="form-control" placeholder="请搜索时间或姓名">
                                        </div>
                                        <div class="col-lg-4 col-md-4">
                                            <button type="button" class="btn btn-default">搜索</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row table-responsive col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1">
                                <table class="table table-striped">
                                   <thead>
                                   <tr>
                                       <th>时间</th>
                                       <th>应到人数</th>
                                       <th>实到人数</th>
                                       <th>缺勤人数</th>
                                       <th>缺勤情况</th>
                                   </tr>
                                   </thead>
                                    <tbody id="tbody1">
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <div class="col-lg-2  col-lg-offset-1 col-md-2 col-md-offset-1">
                                    <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal">
                                        请假情况
                                    </button>
                                </div>
                                <div class="col-lg-3  col-lg-offset-5 col-md-3 col-md-offset-5">
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination">
                                            <li class="disabled"><a href="#" aria-label="Previous"><span
                                                    aria-hidden="true">&laquo;</span></a></li>
                                            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li>
                                                <a href="#" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-lg-2 col-lg-offset-1 col-md-2 col-md-offset-1">
                                    <span><b>首页</b></span>/<span>考勤系统</span>
                                </div>
                            </div>
                            <div class="row seek">
                                <div class="col-lg-10 col-lg-offset-2 col-md-10 col-md-offset-2">
                                    <div class="container-fluid">
                                        <div class="col-lg-2 col-md-2 " id="name">
                                            欢欢
                                        </div>
                                        <div class="col-lg-4 col-md-4">
                                            <a href="#">你有2条未打卡记录，请<span>点击查看</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row seek">
                                <div class="col-lg-1 col-lg-offset-2 col-md-1 col-md-offset-2">
                                    <button type="button" id="btn3" class="btn btn-default" data-toggle="modal" data-target="#myModal1">请假
                                    </button>
                                </div>
                                <div class="col-lg-1 col-lg-offset-2 col-md-1 col-md-offset-2">
                                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal20">请假记录
                                    </button>
                                </div>
                                <div class="col-lg-1 col-lg-offset-2 col-md-1 col-md-offset-2">
                                    <button type="button" class="btn btn-default">每月记录</button>
                                </div>
                            </div>
                            <div class="row table-responsive col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1">
                                <table class="table table-striped">
                                    <tr>
                                        <th>时间</th>
                                        <th>上班时间打卡</th>
                                        <th>下班时间打卡</th>
                                        <th>考勤情况</th>
                                    </tr>
                                   <tbody id="tbody2">

                                   </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <div class="col-lg-3  col-lg-offset-8 col-md-3 col-md-offset-8">
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination">
                                            <li class="disabled"><a href="#" aria-label="Previous"><span
                                                    aria-hidden="true">&laquo;</span></a></li>
                                            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li>
                                                <a href="#" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script src="../js/logistics.js"></script>
</html>